import React from 'react'
import classnames from 'classnames';
import {Link} from 'dva/router';
import {Layout} from 'antd';
import {name, logo, logoDark} from '../../config/config';
import CMenu from './CMenu';
import styles from './CSider.less'

const {Sider} = Layout;

export default class CSider extends React.PureComponent {

  render() {
    const {lightTheme, collapsed, mainNavList, location} = this.props;
    const menusProps = {
      lightTheme,
      collapsed,
      mainNavList,
      location,
    };

    return (
      <Sider
        trigger={null}
        collapsible
        collapsed={collapsed}
        breakpoint="md"
        className={classnames({[styles.lightTheme]: lightTheme || false})}
        style={{overflow: 'auto', height: '100vh', position: 'fixed', left: 0}}
      >
        <div className={styles.logo}>
          <Link to="/">
            <img src={lightTheme ? logo : logoDark} alt="logo"/>
            <h2 className={lightTheme ? styles.darkFont : ''}>{name}</h2>
          </Link>
        </div>
        <CMenu {...menusProps} />
      </Sider>
    )
  }
}

